<!-- 库存销量分析 -->
<template>

  <div class='com-container'>
    <div class='com-chart' ref='ringCharts'></div>

    <!-- 底部详细信息 -->
    <div class="buttom">

      <div class="stateCharts">
      <span class="state">状态</span>
      <div class="name" :key="index" v-for="(item, index) in Data">
        <span class="round" :style="{background:item.color}"></span>
        <span style="margin-left:15px;">{{item.name}}</span>
      </div>

      </div>
      <div class="stateCharts">
        <span class="state">人数</span>
        <span class="name" :key="index" v-for="(item, index) in Data">{{item.value}}人</span>
      </div>

      <div class="stateCharts">
        <span class="state">占比</span>
        <span class="name" :key="index" v-for="(item, index) in Data">{{towNumber(item.value * 100 / sum)}}%</span>
      </div>

    </div>


  </div>
</template>

<script>
import { getstudentManage } from "@/api/statistical/grow";

export default {
  props: {
    galleryId: {
      type: '',
      default: ''
    },
  },
  data () {
    return {
      chartInstance: null,
      Data: [   { name: '已完成', value: '', color: '#E4C477'}, 
                { name: '进行中', value: '', color: '#811c1d'},
                { name: '未开始', value: '', color: '#d97559'},
            ],
      ringData: [],
      gradeId: this.galleryId,
      sum: 0,
      Color: [ "#811c1d", "#E4C477", "#d97559" ],

    }
  },

  async mounted () {
    this.initChart()
    this.getclasslist()

  },
  methods: {
    towNumber(val) {
      return val.toFixed(2)
    },
    initChart () {
      this.chartInstance = this.$echarts.init(this.$refs.ringCharts, 'chalk')
      const initOption = { }
      this.chartInstance.setOption(initOption)
    },

    async getclasslist(){
      // 根据班级查询
      // console.log(this.galleryId, 'gradeId')
      const res = await getstudentManage(this.gradeId)
      
      this.updateChart(res.rows[1])
    },

    updateChart (data) {
      this.sum = 0
      this.ringData = []
      const ringColor = [ "#811c1d", "#E4C477", "#d97559" ]

      for(let key in data){
        this.ringData.push({name:key,value:data[key]})
        this.sum += data[key]
      }

      for ( const key in this.Data ) {
        // console.log(this.Data[key].name, 'Data')
        for ( const index in this.ringData ) {
          // console.log(this.ringData[index].name, 'ringData')
          if ( this.Data[key].name == this.ringData[index].name ) {
            // console.log(this.Data[key].name == this.ringData[index].name)
            this.Data[key].value = this.ringData[index].value
          }
        }
      }
      console.log( this.Data, 'data')

      const dataOption = {
        tooltip: {
          trigger: 'item',
          formatter: "{b}: {c}",
        },
        series: 
        [
          {
            type: 'pie',
            data: this.ringData, 
            radius: [140, 100],
            emphasis: {
              scale: false,
            },
            tooltip: {
            },
            label: {
              show: false,
            },
            itemStyle: {
              normal: {
                color: function (params) {
                  return ringColor[params.dataIndex]
                },
              },
            }
          },
        ]
      }
      this.chartInstance.setOption(dataOption)
    },
  }
}
</script>

<style>

.com-container {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.com-chart {
  height: 20rem;
  width: 100%;
}

/* 底部详细信息 */
.buttom {
  display: flex;
  flex-direction: row;
  margin: 0 1.25rem;
}

/* 信息列区块 */
.stateCharts {
  display: flex;
  flex-direction: column;
  margin: .625rem 2rem;
}

/* 标题 */
.stateCharts .state {
  margin: 1rem;
  /* 字体加粗 */
  font-weight:700;
  color: #101010;
}

/* 信息 */
.stateCharts .name {
  display: flex;
  flex-direction: row;
  margin: 1rem 0.75rem;
  color: #666666;
  font-size: 1rem;
  line-height: 1.375rem;
  width: 100%;
}

/* 颜色球 */
.stateCharts .name .round {
  border-radius: 50%;
  width: 1.25rem;
  height: 1.25rem;
}
</style>
